<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加网关</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="网关IP" align="center">
        <template slot-scope="scope">{{ scope.row.ip }}</template>
      </el-table-column>
      <el-table-column label="网关端口" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="验证码" align="center">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'监控文件：'+scope.row.vcode"
            :manual="scope.row.vcode?false:true"
            placement="top"
          >
            <el-switch
              :value="scope.row.vcode?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeservice(scope.row.id,'vcode',scope.row.vcode)"
            ></el-switch>

            <!-- <el-tag
              effect="dark"
              @click="changeservice(scope.row.id,'vcode',scope.row.vcode)"
              :type="scope.row.vcode?'success':'danger'"
            >{{ scope.row.vcode?"已开启": "未开启"}}</el-tag>-->
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'监控路径：'+scope.row.sort"
            :manual="scope.row.sort?false:true"
            placement="top"
          >
          <el-switch
              :value="scope.row.sort?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeservice(scope.row.id,'sort',scope.row.sort)"
            ></el-switch>
            <!-- <el-tag
              effect="dark"
              @click="changeservice(scope.row.id,'sort',scope.row.sort)"
              :type="scope.row.sort?'success':'danger'"
            >{{ scope.row.sort?"已开启": "未开启"}}</el-tag> -->
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="脚本库" align="center">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            @click="jump(scope.row.ip+':'+scope.row.port,scope.row.remoteip+':'+scope.row.remoteport,scope.row.secretkey)"
            type="primary"
          >管理</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="远程脚本" align="center">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            @click="jumpb(scope.row.ip+':'+scope.row.port,scope.row.secretkey,scope.row.path,scope.row.remoteip+':'+scope.row.remoteport)"
            type="primary"
          >管理</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="网关SecretKey" align="center" fixed="right">
        <template slot-scope="scope">{{ scope.row.secretkey }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="gotoremote(scope.row.id)">远程管理</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="adddialogStatus" :visible.sync="aadialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="微服务网关-IP" prop="ip">
          <el-input v-model="temp.ip" placeholder="输入网关IP" clearable />
        </el-form-item>
        <el-form-item label="微服务网关-端口" prop="port">
          <el-input v-model="temp.port" placeholder="输入网关端口" clearable />
        </el-form-item>
        <el-form-item label="远程脚本网关-IP" prop="remoteip">
          <el-input v-model="temp.remoteip" placeholder="输入远程脚本服务器IP" clearable />
        </el-form-item>
        <el-form-item label="远程脚本网关-端口" prop="remoteport">
          <el-input v-model="temp.remoteport" placeholder="输入远程脚本服务器端口" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="aadialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="createData()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getClinets, addClient, delClient } from '@/api/client'
import * as API from "@/api/client";
import { config } from "@vue/test-utils";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      adddialogStatus: "",
      aadialogFormVisible: false,
      rules: {
        ip: [{ required: true, message: "ip is required", trigger: "change" }],
        port: [
          { required: true, message: "port is required", trigger: "change" }
        ],
        remoteip: [
          { required: true, message: "remoteip is required", trigger: "blur" }
        ],
        remoteport: [
          { required: true, message: "remoteport is required", trigger: "blur" }
        ]
      },
      temp: {
        ip: "",
        port: "",
        remoteip: "",
        remoteport: ""
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    gotoremote(id){
      console.log(id)
      this.$router.push({
        name: "remote", //这个name就是你刚刚配置在router里边的name
        params: {
          id
        }
      });
    },
    fetchData() {
      this.listLoading = true;
      API.getClinets().then(response => {
        const data = response.data;
        if (data.code == 0) {
          this.list = data.data;
          this.listLoading = false;
          console.log(this.list);
        }
      });
    },
    resetTemp() {
      this.temp = {
        ip: "127.0.0.1",
        port: "9876",
        remoteip: "127.0.0.1",
        remoteport: "3030"
      };
    },
    handleCreate() {
      this.resetTemp();
      this.adddialogStatus = "添加网关";
      this.aadialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.aadialogFormVisible = false;
          API.addClient(this.temp).then(response => {
            const data = response.data;
            if (data.code == 0) {
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
                duration: 2000
              });
              this.refreshView();
            } else {
              this.$message.error(date.msg);
            }
          });
        }
      });
    },
    handleDelete(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          API.delClient(id).then(response => {
            const data = response.data;
            if (data.code == 0) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
              this.refreshView();
            } else {
              this.$message.error(date.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    jump(client,remote, skey ) {
      // console.log(client,remote,skey)
      this.$router.push({
        name: "script", //这个name就是你刚刚配置在router里边的name
        params: {
          client,
          remote,
          skey
        }
      });
    },
    
    changeservice(id, service, content) {
      let params = {
        clientID: id,
        service
      };
      let a = "关闭";
      if (content == "") {
        a = "开启";
      }
      if (service=="vcode"){
        service="验证码"
      }
      if (service=="sort"){
        service="排序"
      }

      // console.log(params, content);

      this.$confirm("是否" + a + service + "?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          API.changeService(params).then(response => {
            const data = response.data;
            if (data.code == 0) {
              this.$notify({
                title: "成功",
                message: a + "成功",
                type: "success",
                duration: 2000
              });
              this.refreshView();
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    refreshView() {
      const { fullPath } = this.$route;
      this.$nextTick(() => {
        this.$router.replace({
          path: "/redirect" + fullPath
        });
      });
    }
  }
};
</script>
